<template>
	<div class="modify-dialog">
		<slot> </slot>
		<el-dialog v-bind="dialogOpts" :visible.sync="dialogVisible">
			<div class="parseWrap">
				<div class="imgWrap" ref="imgRef">
					<div class="imgBox">
						<img :src="imgSrc" />
					</div>
					<!-- <div class="imgBox" :style="{ scale }">
						
						<div
							:class="['text', curIndex == i && 'active']"
							v-for="(e, i) in texts"
							@click="onItem2(e, i)"
							:style="{
								left: `${e.location.left}px`,
								top: `${e.location.top}px`,
								width: `${e.location.width}px`,
								height: `${e.location.height}px`,
							}"
							:key="i"
						></div>
					</div> -->
				</div>
				<div class="textWrap">
					<div class="textList" ref="textRef">
						<div
							@click="onItem(e, i)"
							:class="['textItem', i == curIndex && 'active']"
							v-for="(e, i) in texts"
							:key="i"
						>
							<span class="index">{{ i + 1 }}</span>
							<span class="value">{{ e.words }}</span>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";

export default {
	mixins: [modifyMixins],
	data() {
		return {
			dialogWidth: "85vw",
			form: {},
			texts: [],
			scale: 1,
			min: 0.1,
			max: 5,
			dirs: [],
			curIndex: -1,
		};
	},
	computed: {
		total() {
			return this.dirs.reduce((a, b) => a + b.count, 0);
		},
		imgSrc() {
			return this.$imgHost + this.row?.cadImg;
		},
		title() {
			return (
				(this.modify == "goodsDetail" ? "货架解析详情" : "仓储解析详情") +
				`（共${this.total}个）`
			);
		},
	},
	mounted() {},
	methods: {
		onItem2(e, i) {
			this.curIndex = i;
			const ref = this.$refs.textRef;
			if (ref) {
				ref.scrollTop = 45 * i;
			}
		},
		onItem(e, i) {
			this.curIndex = i;
			const { left, top } = e.location;
			const ref = this.$refs.imgRef;
			console.log(ref, left, top);
			if (ref) {
				ref.scrollLeft = left;
				ref.scrollTop = top;
			}
		},
		onStep(step = 0.1) {
			const { scale, min, max } = this;
			let res = this.$quinn.$acc.add(scale, step);
			if (res <= min) res = min;
			else if (res >= max) res = max;
			this.scale = res;
		},
		showDialog(modify = "add", row = {}) {
			this.scale = 1;
			this.curIndex = -1;
			this.dialogVisible = true;
			this.row = row;
			this.modify = modify || "add";
			this.$api["newCadParseTexts"]({
				orderId: row.id,
				type: modify.replace("Detail", ""),
			}).then((res) => {
				this.dirs = res?.dirs || [];
				this.texts = res?.texts || [];
			});
		},
		onSubmit(form) {
			// this.$api["newOrderUpdate"](form).then(this.submitDoneMsg);
		},
	},
};
</script>

<style lang="less" scoped>
.parseWrap {
	height: 65vh;
	display: flex;
	.imgWrap {
		flex: 1;
		overflow: auto;
		position: relative;
		.imgBox {
			width: 100%;
			height: 100%;
			position: relative;
			img {
				object-fit: contain;
			}
			.text {
				position: absolute;
				z-index: 1;
				left: 0;
				top: 0;
				border: 2px solid blue;
				border-radius: 4px;
				width: 5px;
				height: 5px;
				cursor: pointer;
				&.active {
					border-width: 4px;
					background: rgba(0, 0, 255, 0.2);
				}
			}
		}
	}
	.textWrap {
		width: 250px;
		height: 100%;
		position: relative;
		.textList {
			height: 100%;
			overflow-y: auto;
			padding: 10px;
			border-radius: 10px;
			color: #666;
			.scrollBar-0;

			.textItem {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 13px;
				cursor: pointer;
				height: 45px;
				&.active {
					border-radius: 10px;
					background: #666;
					color: white;
				}
			}
		}
		.tool {
			position: absolute;
			bottom: 30px;
			left: -250px;
			z-index: 999;
			padding: 6px;
			border-radius: 10px;
			width: 200px;
			// .scale {
			// 	font-size: 14px;
			// 	width: 30px;
			// 	text-align: center;
			// }
			// span {
			// 	cursor: pointer;
			// }
		}
	}
}
</style>

